Der Titel ist ganz schön reißerisch, also wie das halt so ist, wenn man so ein Proposal
abgeben muss, ob es ein wirkliches Überlebenshandbuch ist, weiß ich nicht. Schön, dass ihr alle
noch durchgehalten habt. Zweiter Tag, vorletzter Vortrag. Ich kann mir vorstellen, dass da
so ein bisschen die Luft raus ist bei euch. Ich habe gerade zu Marc gesagt, sein Vortrag
war ja eher entspannt und chillig. Es tut mir leid, ich muss das beenden. Ich habe eine
totale Druckbetankung. Ich habe beim Testdurchlauf heute Morgen nach 45 Minuten war ich bei der
Hälfte und ich muss mich echt anstrengen. Ich werde die 45 Minuten brauchen. Ich versuche
so schnell wie möglich da durchzukommen, sodass trotzdem bei euch was ankommt. Ganz
kurz noch zwei, drei Worte zu mir. Danke für die Vorstellung. Das war fast vollständig.
Ich wollte noch ein bisschen was zu meinem Hintergrund sagen, damit ihr auch einordnen
könnt, warum ich mich für alles interessiere. Ich mache quasi Computersachen, seit ich
ein kleiner Junge war, Websites seit 1995 und habe aber eigentlich eine Ausbildung als
Innenarchitekt. Das heißt, ich komme so ein bisschen aus der Architektur- und Designecke
auch, habe eben seit 2000 Agenturen, wo wir uns hauptsächlich mit Websites, über drei
Websites, viel barrierefrei, dann so was beschäftigen und ich habe ein Faible für Systematik. Das
glaube ich braucht man auch so ein bisschen in dem Ding. Ich möchte über Designsysteme
im Allgemeinen, Pattern Libraries und die Hintergründe dazu ein bisschen sprechen und
dann in einem zweiten Teil, wie gerade schon angedeutet, anhand von der neuen Website,
der Nürnberg Web Week zeigen, wie wir das Ganze in der Praxis bei uns einsetzen. Nicht
nur bei dem Projekt, sondern auch im Allgemeinen verwenden. Ein kleines Detail noch, die, die
mich ein bisschen verfolgen, haben es vielleicht mitgekriegt. Der Vortrag ist in einer etwas
ungewöhnlichen Situation entstanden, nämlich ziemlich genau jetzt vor einer Woche war ich
80 Kilometer vom EPI-Zentrum beim Erdbeben in Japan weg und wollte eigentlich da mir
viel Zeit nehmen diesen Vortrag vorzubereiten. So hat mein Arbeitsplatz ausgesehen, also
außer Wohnmobil hat mir nicht viel zur Verfügung gestanden. Ich hoffe trotzdem, dass was Anständiges
dabei rausgekommen ist. Designsysteme. Ich würde erstmal eine Frage stellen, wer von
euch hat eine Vorstellung, was ein Designsystem ist, was eine Pattern Library ist, was das
denn sein könnte? Okay, also so gut die Hälfte. Wie viele von euch arbeiten denn tatsächlich
aktiv mit einem Designsystem in Projekten oder hatten damit schon mal zu tun? Okay,
dann glaube ich sind ein paar Leute da, denen ich hoffentlich ein paar Anregungen mit auf
den Weg geben kann. Als erstes möchte ich so ein bisschen erzählen, wo kommt das eigentlich
alles her? Ich möchte euch da irgendwie aufgabeln. Designsysteme oder die Vorläufer davon kennt
man eigentlich schon ziemlich lang, vor allem aus dem Printbereich. Es gibt diesen Begriff
Style Guide oder Brand Manual schon eine ganze Weile und was macht man in so einem Style
Guide üblicherweise? Man dokumentiert da eine Marke oder ein Corporate Design und legt
Gestaltungsmerkmale nieder, die man dann später rauslesen und anhand davon Produkte ableiten
kann. Da gehören typischerweise so Sachen rein wie Schriften, wie geht man mit Text
im Allgemeinen um, wie geht man mit Bildern um. Aber es geht auch in Produktionsverfahren
hinein, also zum Beispiel welches Papier wird verwendet, um irgendwas zu drucken oder welche
Druckfarben werden dafür verwendet und Veredelungen und so weiter. Die Zielsetzungen von so einem
Style Guide aus dem Printbereich sind üblicherweise eben, dass man einen Corporate Design tatsächlich
dokumentiert und kommunizieren kann. Das ist ein gutes Hilfsmittel um eine Corporate Identity
aufzubauen, das heißt, dass man sich mit einer Marke identifizieren kann und vor allem eben
eine Hilfestellung, um dann anschließend Medien draus abzuleiten. Das heißt, wenn
man irgendwas produzieren muss, hat man eine gute Grundlage um darauf aufzubauen. Das ist
vor allem dann wichtig, wenn man sich vorstellt, dass oftmals im späteren Leben von so einem
Corporate Design der eine oder andere Umsitzer nicht der wahnsinnig begnadete Designer ist,
der auch mit der Marke von Anfang an befasst war. Das heißt, es wird so ein bisschen das
Virtuositäts-Erfordernis rausgenommen aus sowas. Es gibt schon diesen Begriff des Style
Guides schon ziemlich lange, ein sehr populäres Beispiel, schon aus den 70er Jahren war beispielsweise
Presenters
Joschi Kuphal
Zugänglich über
Offener Zugang
Dauer
00:45:20 Min
Aufnahmedatum
2018-09-13
Hochgeladen am
2018-09-13 16:45:08
Sprache
de-DE
Folien finden Sie hier: https://jkphl.is/slides/wke2018
Immer komplexere Projektanforderungen, die fortschreitende Fragmentierung von Webtechnologien und die damit notwendige Verteilung auf immer spezialisiertere Teams fördern laufend neue Herausforderungen zu Tage. Die effektive Verzahnung von Spezialdisziplinen und die laufende Abstimmung zwischen allen Beteiligten stellt in vielen Projekten einen signifikanten Aufwandsposten dar — ganz jenseits der eigentlichen Design- und Entwicklungsarbeit. Als eine sinnvolle Herangehensweise bei entsprechend umfangreichen Projekte hat sich das »Component-Driven Development« hervorgetan: Statt des überkommenen Ansatzes, in kompletten »Seiten« zu denken und umzusetzen, lassen sich Anwendungen und ihre Oberflächen in design- und funktionsbezogene Module zergliedern, die Stück für Stück und aufeinander aufbauend isoliert konzipiert, entworfen, umgesetzt und getestet werden können.
Zur Unterstützung komponentengetriebener Herangehensweisen sind in den letzten Jahren etliche Werkzeuge auf der Bildfläche erschienen. Die Spanne reicht von vergleichsweise einfachen (CSS-)Dokumentationswerkzeugen wie KSS bis zu leistungsfähigen Styleguide-Generatoren wie Brad Frost’s Pattern Lab . Je nach zugrunde liegender Methodologie verfolgen diese Werkzeuge unterschiedlichste Ansätze hinsichtlich
- Art und Umfang der dokumentierten Module
- Organisation und Navigation von Komponenten
- Dokumentationsform
- Darstellung von Varianten
- Darstellung von Zusammenhängen zwischen Komponenten
- inhaltlicher Dynamik und dem Ergänzen neuer Komponenten
- u.s.w.
So unterschiedlich wie die Landschaft der Methodologien und Werkzeuge sind auch die Auffassungen, welche Informationen Eingang in ein solches System finden sollen, und so vielfältig sind auch die gebräuchlichen, teils synonym verwendeten Bezeichnungen wie »Design System«, »Pattern Library«, »Living Styleguide« oder »Komponentenbibliothek«. Richtig umgesetzt fördern sie den Austausch aller Projektbeteiligten (Auftraggeber, Design-Team, Entwickler-Team, etc.), unterstützen kontinuierliches Testing (visuell, funktional, Barrierefreiheit, etc.) und erleichtern das Onboarding später hinzustoßender Team-Mitglieder.
Eine besondere Herausforderung stellt in vielen Fällen das langfristige Synchronhalten von Pattern Library und realem Projektcode dar — ein Grund, warum viele Systeme nicht auf Dauer überleben (gerade wenn Projekte in die heiße Phase übergehen). Anhand eines aktuellen Projekts — der bis zum Vortrag gerelaunchten Präsenz der Nürnberg Web Week — demonstriert Joschi Kuphal, wie die Live-Integration einer Fractal-basierten Library mit einer TYPO3-Website gelingen kann.